<template>
  <div :class="['image-viewer', className]">
    <div
      class="image-item"
      v-for="(item, index) in source"
      :key="index"
      @click="viewImage(index, false)"
      v-show="thumbnailShow && mode === 'thumbnail'"
    >
      <img :src="item" />
    </div>
    <div transition="fade">
      <div class="modal-view" v-show="mode === 'view'" @click="closeViewer">
        <div class="modal-wrapper" @click.stop="closeViewer">
          <div class="viewer-img">
            <div v-if="hasbg" class="viewer-bg">
              <img alt src="@assets/img/courouse.png" />
            </div>
            <div class="b-viewer-bg">
              <img :src="source[index]" />
            </div>
          </div>
          <div class="arrow arrow-left" :class="{ disabled: index <= 0 }" @click.stop="prev">
            <Icon type="chevron-left" size="64"></Icon>
          </div>
          <div
            class="arrow arrow-right"
            :class="{ disabled: index >= source.length - 1 }"
            @click.stop="next"
          >
            <Icon type="chevron-right" size="64"></Icon>
          </div>
          <div class="close" @click.stop="closeViewer">
            <Icon type="md-close" size="24" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    source: Array,
    thumbnailShow: {
      type: Boolean,
      default: true
    },
    className: {
      type: String,
      default: ""
    }
  },
  data: function() {
    return {
      mode: "thumbnail",
      index: 0,
      hasbg: false
    };
  },
  methods: {
    prev: function() {
      this.viewImage(this.index - 1, false);
    },
    next: function() {
      this.viewImage(this.index + 1, false);
    },
    viewImage: function(index, flag) {
      this.hasbg = flag;
      if (index < 0) {
        this.index = 0;
      } else if (index >= this.source.length) {
        this.index = this.source.length - 1;
      } else {
        this.index = index;
      }
      this.mode = "view";
    },
    closeViewer: function() {
      this.mode = "thumbnail";
    }
  }
};
</script>
<style scoped>
.bannerViewer .viewer-img {
  width: 1140px !important;
  height: 204px !important;
}

.image-viewer .image-item {
  width: 102px;
  height: 62px;
  margin-right: 8px;
  border: 1px solid #dddddd;
  background: white;
  position: relative;
  cursor: pointer;
  display: inline-block;
  z-index: 1;
}
.image-viewer .image-item img,
.bannerViewer .image-item img {
  max-width: 100px;
  max-height: 60px;
  position: absolute;
  margin: 0px !important;
}
.image-viewer .image-item img {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.image-viewer .modal-view {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(33, 33, 33, 0.6);
  z-index: 1000;
}
.image-viewer .modal-view .modal-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(33, 33, 33, 0.7);
}
.image-viewer .modal-view .modal-wrapper img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-height: calc(100vh - 30px);
  max-width: calc(100vw - 100px);
}
.bannerViewer .modal-view .modal-wrapper .viewer-img {
  position: absolute;
  width: 50%;
  height: 50%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
}

.bannerViewer .b-viewer-bg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.bannerViewer .modal-view .modal-wrapper .b-viewer-bg img {
  position: relative;
  top: 30px !important;
  max-width: 1140px;
  min-width: 800px;
  max-height: 140px;
  min-height: 100px;
}
.bannerViewer .modal-view .modal-wrapper .viewer-bg {
  top: -2px !important;
}
.bannerViewer .viewer-bg {
  padding-top: -3px !important;
}
.image-viewer .modal-view .modal-wrapper .viewer-bg {
  z-index: 999;
  position: absolute;
  top: -30px;
}

.bannerViewer .modal-view .modal-wrapper img {
  margin: 0px !important;
}

.image-viewer .modal-view .modal-wrapper .close {
  position: absolute;
  right: 16px;
  top: 16px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.image-viewer .modal-view .modal-wrapper .close .iconfont {
  font-size: 21px;
}

.modal-wrapper .arrow {
  position: absolute;
  top: calc(50% - 8px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
  color: white;
}
.modal-wrapper .arrow.disabled {
  cursor: not-allowed;
  color: #1e1e1e;
}
.modal-wrapper:hover .arrow {
  opacity: 0.8;
}
.modal-wrapper .arrow .iconfont {
  font-size: 100px !important;
}
.arrow-left {
  left: 30px;
}
.arrow-right {
  right: 30px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
